﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MathConfig.aspx.cs" Inherits="NX5Web.admin.BaseData.MathConfig.MathConfig" %>

<style>
    .media-list{
        width: calc(100% - 30px);
        margin: 0 auto;
    }

    .el-table .el-table__cell{ z-index: inherit; }
</style>

<div id="mathconfig" class="biz-container">
    <!-- 左侧菜单栏 -->
    <div class="left-menu-bar">
        <!-- 业务标题 -->
        <div class="left-title"><span>{{leftTitle}}</span></div>
        <!-- 菜单 -->
        <el-menu v-if="BookList.length>0" :default-active="defaultActiveMenu" style="height: calc(100vh - 96px); overflow: scroll;">
            <el-sub-menu v-for="lv1 in BookList" :index="lv1.LvId.toString()">
              <template #title>
                <el-icon><location></location></el-icon>
                <span>{{lv1.Title}}</span>
              </template>
              <el-sub-menu v-for="lv2 in lv1.items" :index="lv1.LvId + '_' + lv2.BookGroupInt">
                <template #title>{{lv2.GroupName}}</template>
                <el-menu-item @click="handleActiveMathCourse(lv3)" v-for="lv3 in lv2.items" :index="lv1.LvId + '_' + lv2.BookGroupInt + '_' + lv3.BookId">
                    <el-icon v-if="lv3.Valid" style="color:#67c23a;"><bell></bell></el-icon>
                    <el-icon v-else style="color:#b8272c;"><bell></bell></el-icon>
                    <span>{{lv3.BookName}}</span>
                </el-menu-item>
              </el-sub-menu>
            </el-sub-menu> 
        </el-menu>
    </div>
    <!-- 右侧业务容器 -->
    <div id="righbar" class="right-content-warp">
        <!-- 右侧标题 -->
        <div class="right-title">{{CurrentBookInfo.BookName}}</div>
        <!-- 右侧操作栏 -->
        <div class="operation-warp" v-if="CourseList.length">
            <el-button class="operation-btn" type="primary" tag="div" @click="visibleAddCourse=true" icon="FolderAdd">添加</el-button>
        </div>
        <!-- 右侧业务内容区 -->
        <el-table
            :data="CourseList"
            :header-cell-style="headerCellStyle"
            :preserve-expanded-content="true"
            :expand-row-keys="expandRowKeys"
            row-key="ID"
            border
            style="width: 100%; margin-top: 10px;"
        >
            <el-table-column type="index" label="#" width="50" align="center"></el-table-column>
            <el-table-column type="expand">
                <template #header><el-icon><expand></expand></el-icon></template>
                <template #default="props">
                    <div class="media-list">
                        <div>视频列表</div>
                        <div>
                            <el-table :data="props.row.MediaList" :header-cell-style="headerCellStyle" stripe border style="width: 100%; margin-top: 10px;">
                                <el-table-column type="index" label="#" width="50" align="center"></el-table-column>
                                <el-table-column prop="Video" label="课程视频"></el-table-column>
                                <el-table-column prop="Describe" label="描述"></el-table-column>
                                <el-table-column prop="Option" label="操作" width="280px">
                                    <template #default="mediaProps">
                                        <el-button type="primary" plain size="small" icon="EditPen">编辑</el-button>
                                        <el-button type="primary" @click="handleSetTimeLine(mediaProps.row)" plain size="small" icon="Guide">配置时间线</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="Title" label="课程名称"></el-table-column>
            <el-table-column prop="Conver" label="封面">
                <template #default="scope">
                    <el-image
                        style="width: 50px; height: 50px"
                        :src="scope.row.Conver"
                        :zoom-rate="1.2"
                        :max-scale="7"
                        :min-scale="0.2"
                        :preview-src-list="[scope.row.Conver]"
                        fit="cover"
                    >
                        <template #viewer-error>
                            <div class="image-viewer-slot image-slot">
                              <el-icon><picture></picture></el-icon>
                            </div>
                        </template>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="Describe" label="描述"></el-table-column>
            <el-table-column prop="MediaList" label="视频数量" width="100px">
                <template #default="props">{{props.row.MediaList.length}}</template>
            </el-table-column>
            <el-table-column prop="option" label="操作" width="280px">
                <template #default="props">
                    <el-button type="primary" plain size="small" icon="EditPen">编辑</el-button>
                    <el-button type="primary" plain size="small" @click="handleUploadCourseVideo(props.row)" icon="Upload">上传视频</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 新增课程 -->
    <ajax-component
        v-if="visibleAddCourse"
        url="/admin/BaseData/MathConfig/AddCourse.aspx"
        :data="CurrentBookInfo.BookId"
        @emit-back="handleAddCourseBack"
    ></ajax-component>

    <!-- 上传课程视频 -->
    <ajax-component
        v-if="visibleUploadCourseVideo"
        url="/admin/BaseData/MathConfig/UploadCourseVideo.aspx"
        :data="CurrentCourse.ID"
        @emit-back="handleUpdateCourseBack"
    ></ajax-component>

    <!-- 时间线脚本配置 -->
    <ajax-component
        v-if="visibleTimeLine"
        url="/admin/BaseData/MathConfig/TimeLine.aspx"
        :data="CurrentCourseMedia"
        @emit-back="handleTimeLineBack"
    ></ajax-component>
</div>

<script type="text/javascript">
    createApp({
        el: "#mathconfig",
        data() {
            return {
                leftTitle: '<%= Request.QueryString["title"] %>',
                defaultActiveMenu: '',
                BookList: [],
                CourseList: [],
                CurrentBookInfo: {},
                CurrentCourse: {},
                CurrentCourseMedia: {},
                visibleAddCourse: false,
                visibleUploadCourseVideo: false,
                visibleTimeLine: false,
                expandRowKeys: [],
                headerCellStyle: {
                    backgroundColor: 'rgb(236, 245, 255)'
                }
            }
        },
        methods: {
            handleTimeLineBack(data) {
                console.log('handleTimeLineBack data', data);
                this.visibleTimeLine = false;
                if (data.action === 'refresh') {
                    
                }
            },
            handleSetTimeLine(mediaRow) {
                this.CurrentCourseMedia = mediaRow;
                this.visibleTimeLine = true;
            },
            handleUpdateCourseBack(data) {
                this.visibleUploadCourseVideo = false;
                if (data.action === 'refresh') {
                    this.loadMathCourseById();
                }
            },
            handleUploadCourseVideo(row) {
                this.CurrentCourse = row;
                this.visibleUploadCourseVideo = true;
            },
            handleActiveMathCourse(book) {
                this.CurrentBookInfo = book;
                this.loadMathCourse();
            },
            handleAddCourseBack(data) {
                this.visibleAddCourse = false;
                if (data.action === 'refresh') {
                    this.loadMathCourse();
                }
            },
            loadMathCourseById() {
                ktlapi({
                    action: 'Cus_GetMathCourseById',
                    data: {
                        CourseId: this.CurrentCourse.ID
                    }
                }).then(resp => {
                    resp.data.forEach(item => {
                        if (!this.CurrentCourse.MediaList.some(m => m.ID === item.ID)) {
                            this.CurrentCourse.MediaList.push(item);
                        }
                    })
                })
            },
            loadMathCourse() {
                loaddingPlus(true);
                ktlapi({
                    apiurl: OT.CommandSet,
                    action: "Cus_GetMathCourseConfig",
                    data: {
                        BookId: this.CurrentBookInfo.BookId
                    }
                }).then((resp) => {
                    loaddingPlus(false);
                    const tables = resp.data.tables;
                    const courseList = tables[0].table || [];
                    const courseMediaList = tables[1].table || [];
                    courseList.forEach(course => {
                        course.MediaList = courseMediaList.filter(media => media.MathCourseId === course.ID) || [];
                    })
                    this.CourseList = courseList;
                })
            },
            /** 数据初始化 */
            init() {
                this.BookList = [];
                this.WordList = [];
                this.SentenceList = [];
                this.UnitList = [];
                this.ActiveUnit = 0;
                loaddingPlus(true);
                ktlapi({
                    "action": "Cus_GetAllMathBookData",
                    "data": {}
                }).then(res => {
                    loaddingPlus(false);
                    if (res.data == null) return;
                    const bookList = pivotJson(res.data, "LvId", ["LvId", "Title"]);
                    for (let i = 0; i < bookList.length; i++) {
                        bookList[i]["items"] = pivotJson(bookList[i]["items"], "BookGroupInt", ["BookGroupInt", "GroupName"]);
                    }

                    const lvId = _.get(bookList, '[0].LvId');
                    const bookGroupInt = _.get(bookList, '[0].items[0].BookGroupInt');
                    const book = _.get(bookList, '[0].items[0].items[0]');
                    let activeId = '';
                    if (lvId) {
                        activeId += lvId;
                        if (bookGroupInt) { activeId += '_' + bookGroupInt; }
                        if (book) { activeId += '_' + book.BookId; }
                    }

                    this.defaultActiveMenu = activeId;
                    this.BookList = bookList;
                    if (book) {
                        this.CurrentBookInfo = book;
                        this.loadMathCourse();
                    }
                })
            }
        },
        mounted() {
            this.init();
        }
    })
</script>